<template>
	<view class="content bgGray">
		<view class="box flex-r ver-c">
			<!-- <u-search
				placeholder="请输入关键字进行搜索"
				v-model="keyword"
				height="80rpx"
				bgColor="#fff"
				@search="searchs"
				@custom="searchs"
				borderColor="#eee"
			></u-search> -->
			<input
				type="text"
				placeholder="请输入关键字进行搜索"
				v-model="keyword"
				class="f1"
				style="background: #fff;border-radius: 50rpx;font-size: 28rpx;padding: 13rpx;text-align: center"
			/>
			<text @click="searchs()" class="gray pl16">搜索</text>
		</view>
		<template v-if="searchList.length > 0">
			<view class="flex-r ver-c jsb pl16 pr16">
				<view class="">最近搜索</view>
				<u-icon name="trash-fill" size="26px" @tap="delhistory()"></u-icon>
			</view>
			<view class="flex-r p16">
				<text class="seachtext" v-for="(item, index) of searchList" :key="index" @tap="toGoods(item)">
					{{ item }}
				</text>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			searchList: []
		}
	},
	onShow() {
		this.searchList = JSON.parse(uni.getStorageSync('searchList') || '[]')
		console.log('搜索历史：', this.searchList)
	},
	methods: {
		searchs() {
			if (this.keyword == '') {
				uni.$u.toast('搜索内容不能为空')
			} else {
				if (this.searchList.includes(this.keyword)) {
					let i = this.searchList.indexOf(this.keyword)
					this.searchList.splice(i, 1)
					this.searchList.unshift(this.keyword)
				} else {
					this.searchList.unshift(this.keyword)
					uni.setStorageSync('searchList', JSON.stringify(this.searchList))
				}
				uni.navigateTo({
					url: `/pages_C/goodList/goodList?keyword=${this.keyword}`
				})
			}
		},
		delhistory() {
			uni.$u.toast('搜索记录已清空')
			uni.removeStorage({
				key: 'searchList'
			})
			this.searchList = []
		},
		toGoods(item) {
			uni.navigateTo({
				url: `/pages_C/goodList/goodList?keyword=${item}`
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	height 100%
.box
	padding 20rpx 20rpx
.seachtext
	border-radius 80rpx
	background #fff
	padding 20rpx 50rpx
	margin-right 20rpx
	border 1px solid #efefef
	overflow hidden
	white-space nowrap
	text-overflow ellipsis
</style>
